extends layout
block content
    style.
      body.top-and-bottom-margins{margin-bottom:0px;}
    .text-center
        h2 Learning-by-doing
        .spacer
        .row
            .big-break
            .big-break
            .big-break
            .col-xs-12.col-sm-6.col-md-3
                img.img-responsive.landing-icon.img-center(src= '/images/landingIcons_connect.svg', alt='Get great references and connections to start your software engineer career')
                .button-spacer
                span 自学编程是一场充满艰难的旅行
                br
                span 因此一路上我们会给你加油打气
                .spacer
            .col-xs-12.col-sm-6.col-md-3
                img.img-responsive.landing-icon.img-center(src= '/images/landingIcons_learn.svg', alt='Learn to code and learn full stack JavaScript')
                .button-spacer
                span 无尽的任务等你来挑战
                br
                span 像打LOL一样学习编程
                .spacer
            .col-xs-12.col-sm-6.col-md-3
                img.img-responsive.landing-icon.img-center(src= '/images/landingIcons_nonprofits.svg', alt='Empower nonprofits with code')
                .button-spacer
                span 遇到问题先搜索再求助
                br
                span 社区积极助你度过难关
                .spacer
            .col-xs-12.col-sm-6.col-md-3
                img.img-responsive.landing-icon.img-center(src= '/images/landingIcons_portfolio.svg', alt='Build a portfolio of apps for nonprofits')
                .button-spacer
                span 一步步构建自己的作品集
                br
                span 让你面试时有充分的信心
                .spacer
        .big-break
        .big-break
        .big-break
        .big-break
        .row
            .col-xs-12.col-sm-8.col-sm-offset-2
                a.btn.btn-cta.signup-btn.btn-block(href="#guide") 编程学习指南
                .button-spacer
                <!-- a.btn.btn-lg.btn-primary.btn-primary-ghost.btn-block(href="/nonprofits") 需要编码帮助的非盈利组织 -->
        hr
        .spacer
        h2 开启新的职业生涯
        .spacer
        .row
            .col-xs-12.col-sm-12.col-md-4
                img.img-responsive.testimonial-image.img-center(src="/images/camper-image-placeholder.png", alt="Meta's testimonial image")
                .button-spacer
                span 我是一个家庭妇女
                br
                span 通过FreeCodeCamp
                br
                span 我设计了很多简洁优雅的界面
                br
                span 这让我获得了一份网页设计师的工作
                h4 -- Meta Hirschl
            .col-xs-12.col-sm-12.col-md-4
                img.img-responsive.testimonial-image.img-center(src="/images/camper-image-placeholder.png", alt="Brian's testimonial image")
                .button-spacer
                span 我是一个退伍伤残老兵
                br
                span 通过FreeCodeCamp
                br
                span 我制作了很多复杂交互的UI
                br
                span 这让我获得了一份Web前端工程师的工作
                h4 --Brian Grant
            .col-xs-12.col-sm-12.col-md-4
                img.img-responsive.testimonial-image.img-center(src="/images/camper-image-placeholder.png", alt="Maxim Orlov's testimonial image")
                .button-spacer
                span 我是一个大叔
                br
                span 通过FreeCodeCamp
                br
                span 我开发了很多功能复杂而且稳定的API
                br
                span 这让我获得了一份Web后端工程师工作
                h4 -- Maxim Orlov
        .spacer
        .row
            .col-xs-12.col-sm-8.col-sm-offset-2
                //- a.btn.btn-lg.btn-primary.btn-primary-ghost.btn-block(href='/stories') 听听更多我们学员的心声
        .spacer
        .spacer
        hr
        .spacer
        h2 你将会学习的技能:
        .spacer
        .row
            .text-center.negative-35
                .col-xs-12.col-sm-6.col-md-3
                    .landing-skill-icon.ion-social-html5
                    h2.black-text HTML5
                .col-xs-12.col-sm-6.col-md-3
                    .landing-skill-icon.ion-social-css3
                    h2.black-text CSS3
                .col-xs-12.col-sm-6.col-md-3
                    .landing-skill-icon.ion-social-javascript
                    h2.black-text JavaScript
                //- .col-xs-12.col-sm-6.col-md-3
                //-     .landing-skill-icon.fa.fa-database.font-awesome-padding
                //-     h2.black-text Database
                //- .col-xs-12.col-sm-6.col-md-3
                //-     .landing-skill-icon.ion-social-github
                //-     h2.black-text Git & GitHub
                .col-xs-12.col-sm-6.col-md-3
                    .landing-skill-icon.ion-social-nodejs
                    h2.black-text Node.js
                .col-xs-12.col-sm-6.col-md-3
                    .landing-skill-icon.custom-landing-skill-icon
                        img(src='/images/react.svg')
                    h2.black-text React.js
                //- .col-xs-12.col-sm-6.col-md-3
                //-     .landing-skill-icon.custom-landing-skill-icon
                //-         img(src='/images/d3-logo.svg')
                //-     h2.black-text D3.js
        .spacer
        hr#guide
        .spacer
        .col-sm-offset-1.text-left
            h2 编程学习指南
            .spacer
            ol.large-li
                strong 学习的三大要素：方向、路径、动手。
                li 计算机博大精深，初学者很容易迷失其中。选定一个方向并坚持下去很重要，Web开发是初学者的最佳选择。
                li 计算机语言众多，选择一门最容易入门的语言即可，JavaScript就很适合。
                li 计算机属于工科，需要的是大量动手实践，而不是死记硬背。
                strong 学编程的三大要素：英语、逻辑、细心：
                li 英语好的同学看英文书籍、文档，写代码非常流畅，所以印度人比中国人在这块更有优势；
                li 编程最重要的就是培养你的逻辑思维，永远记住：思维是人脑最核心的东西；
                li 在编程中经常被一个符号、一个字母的拼写错误而卡住半天，所以优秀的程序员永远都是粗中带细。
                strong 关于编程的三个错误认识：枯燥无味、烧脑、青春饭。
                li 会编程的人都是奇葩，这种整天和英文字母、数字待在一起的工作枯燥无味。
                li 编程太烧脑，里面各种算法、数据结构要让人疯掉，编程纯粹就是个烧脑的工作。
                li 搞编程的经常加班，这个行业就是个吃青春饭的行业，30岁必须得转行。
                strong 关于编程的三个正确认识：有趣、不烧脑、铁饭碗。
                li 字母和数字的无限组合就能创造出那么多有趣的网站、游戏、软件，这是非常让人着迷的，也非常培养一个人的专注力。
                li 学编程不是搞计算机科学，你不需要接触那么高深的算法、数据结构、高等数学，它并不烧脑，但却烧手(需要每个人手动敲大量代码)。
                li 只要你会编程，能解决问题，没有人在乎你今年是81岁、还是18岁，编程这门技能会成为你一辈子的铁饭碗，
                strong 学习编程的至理名言：Learning by doing 实践是学习编程的重中之重
                li 任何你能看到、听到的东西都是他人总结的知识点，如果你不实践、不消化、不转化成自己的东西，那这些知识永远是他人的，不是你自己的。
                li 在掌握最小知识点后，就应该立刻开始实践，在实践中发现更多知识点；
                li 英文是学习编程的最大障碍，所以一款好用的中英文词典是你的好帮手。
                   a(href='http://cidian.youdao.com/multi.html') 传送门
                li 找一个安静的环境，把手机静音，集中注意力开始我们的互动课程吧。
        .big-break
        .row
            .col-xs-12.col-sm-8.col-sm-offset-2
                a.btn.btn-cta.signup-btn.btn-block(href="/email-signin") 准备好了，GO!
        //- hr
        //- .row
        //-   ul.col-md-4.col-xs-12
        //-     li
        //-       strong 学习资源
        //-     li
        //-       a(href='http://www.runoob.com' target='_blank') 菜鸟教程
        //-     li
        //-       a(href='https://developer.mozilla.org/zh-CN/docs/Web' target='_blank') MDN
        //-     li
        //-       a(href='https://www.zhihu.com/question/19834302/answer/107753320' target='_blank') 新手如何系统性学习编程
        //-     li
        //-       a(href='http://ucai.cn/openclass/show/315' target='_blank') FreeCodeCamp实战剖析（需注册优才账号）
        //-   ul.col-md-4.col-xs-12
        //-     li
        //-       strong 合作伙伴
        //-     li
        //-       a(href='https://github.com/huluoyang/freecodecamp.cn' target='_blank') GitHub开源
        //-     li
        //-       a(href='http://juhe.cn' target='_blank') 聚合数据
        //-     li
        //-       a(href='https://sdk.cn' target='_blank') SDK
        //-     li
        //-       a(href='http://deveco.io' target='_blank') DevEco
        //-   ul.col-md-4.col-xs-12
        //-     li
        //-       strong 联系我们
        //-     li 官方QQ群：526289580
        //-     li 微信公众号：freecodecamp
        //-     li 苏州猿生态信息科技有限公司
        //-     li
        //-        a(href="http://www.miibeian.gov.cn" target='_blank')  苏ICP备16029531号
